<template>
	<uni-popup ref="popupRef" type="center" :mask-click="maskClick" @change="onChange">
		<view class="popup-mask" @click="close">
			<view class="custom-popup" @click.prevent.stop="">
				<text class="title">{{ title }}</text>
				<text class="content" v-show="content">{{ content }}</text>
				<image src="/static/icon/loading.svg" class="loading-icon" v-if="loading"></image>
				<image src="/static/icon/success.svg" class="icon" v-if="success"></image>
				<image src="/static/icon/warning.svg" class="icon" v-if="warning" @click="close"></image>
				<view class="but-box" v-if="showBut" @click="close">
					{{butText}}
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const title = ref('')
	const content = ref('')
	const maskClick = ref(true)
	const loading = ref(true)
	const success = ref(false)
	const warning = ref(false)
	const showBut = ref(false); //下方按钮
	const butText = ref(''); //按钮文字

	const popupRef = ref(null)
	// 打开弹窗
	const open = (options = {}) => {
		title.value = options.title || ""
		content.value = options.content || ""
		maskClick.value = options.maskClick || true
		loading.value = options.loading == false ? false : true
		success.value = options.success == true ? true : false
		warning.value = options.warning == true ? true : false
		popupRef.value?.open()
		showBut.value = options.showBut
		butText.value = options.butText || "确定"
	}

	// 关闭弹窗
	const close = () => {
		popupRef.value?.close()
	}

	// change事件处理
	const onChange = (e) => {
		// 处理弹窗状态变化
		console.log('GlobalPopup状态变化:', e);
	}

	// 暴露方法给父组件
	defineExpose({
		open,
		close
	})
</script>

<style scoped>
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(2rpx);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.custom-popup {
		background-color: rgba(255, 255, 255, 0.8);
		min-width: 348.84rpx;
		max-width: 500rpx;
		padding: 60rpx 20rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 20.42rpx;
		z-index: 9999;
	}

	.title {
		display: block;
		font-size: 27.91rpx;
		font-weight: 500;
		color: rgba(18, 24, 38, 1);
	}

	.content {
		display: block;
		font-size: 20.93rpx;
		font-family: SYL;
		color: rgba(57, 65, 80, 1);
	}

	.loading-icon {
		width: 27.9rpx;
		height: 27.91rpx;
		animation: rotate 2s linear infinite;
	}

	.icon {
		width: 27.9rpx;
		height: 27.91rpx;
	}

	/* 定义旋转动画 */
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.but-box {
		width: 100%;
		border-top: 1.74rpx solid rgba(230, 230, 230, 1);
		font-size: 27.91rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		color: rgba(42, 130, 228, 1);
		text-align: center;
		padding-top: 20rpx;
	}
</style>